<template>
<div class="imgBox">
        <img :src="props.cover"/>
        <span>{{ props.score }}</span>
        <span></span>
        <span></span>
    </div>
    <div class="infoBox">
        <span>{{ props.title }}</span>
        <span>{{ props.lable }}</span>
    </div> 
</template>

<script lang="ts" setup>
interface Props{
        title:string,
        cover:string,
        lable:string,
        score:string,
}
const props = defineProps<Props>()

</script>

<style lang="scss" scoped>
@import url(../../../assets/css/comicHotCard.scss);
.imgBox{
    height: 80%;
    margin-top: 0px;
}
.infoBox{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    height: 20%;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 0 -20px 2px var(--back);
    padding-top: 10px;
    box-sizing: border-box;
    & span:nth-child(1){
        width: 100%;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
    }
    & span:nth-child(1):hover{
        color: #069cfae0;
    }
    & span:nth-child(2){
        color: #9499A0;
        cursor: default;
        font-size: 13px;
    }
}
</style>